import React, { Component } from 'react'
import './search.css'
import axios from 'axios'
import PubSub from 'pubsub-js'

export default class Search extends Component {
  searchUser = async () => {
    const {
      iptRef: { value: keyWord },
    } = this
    // console.log(keyWord)
    // 发送网络请求
    // const res = await axios.get('https://api.github.com/search/users?q=' + keyWord)
    // console.log(res.data)
    // this.props.saveUsers(res.data.items)
    /* this.props.updateAppState({
      isFirst: false,
      isLoading: true,
    }) */
    PubSub.publish('Jetwang', {
      isFirst: false,
      isLoading: true,
    })
    axios.get('https://api.github.com/search/users?q=' + keyWord).then(
      res => {
        /* this.props.updateAppState({
          isFirst: false,
          isLoading: false,
          users: res.data.items,
        }) */
        PubSub.publish('Jetwang',{
          isFirst: false,
          isLoading: false,
          users: res.data.items,
        })
      },
      err => {
        /* this.props.updateAppState({
          isFirst: false,
          isLoading: false,
          err: err.message
        }) */
        PubSub.publish('Jetwang',{
          isFirst: false,
          isLoading: false,
          err: err.message,
        })
      }
    )
  }

  render() {
    return (
      <div className="search">
        <h3>Search Github Users</h3>
        <div className="ipt">
          <input type="text" ref={c => (this.iptRef = c)} placeholder="enter the name you search" />{' '}
          <button onClick={this.searchUser}>Search</button>
        </div>
      </div>
    )
  }
}
